<template>
    <div class="main">
        <Nav />
        <div class="right_route">
            <h3>用户管理 <span> / 用户详情</span></h3>
            <div class="content">
                <el-row :gutter="20">
                    <!-- <el-col :span="3">
                        <div class="user_img_list">
                            <img :src="user_data.user_img" alt="" class="user_img">
                        </div>
                    </el-col> -->
                    <el-col :span="3">
                        <div class="item">
                            <h4>
                                微信昵称
                            </h4>
                            <p>{{ list.nickname }}</p>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="item">
                            <h4>
                                用户id
                            </h4>
                            <p>{{ list.id }}</p>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="item">
                            <h4>
                                手机号
                            </h4>
                            <p>{{ list.mobile }}</p>
                        </div>
                    </el-col>
                    <el-col :span="6">
                        <div class="item">
                            <h4>
                                注册时间
                            </h4>
                            <p>{{ list.created_at }}</p>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="item">
                            <h4>
                                信息完善
                            </h4>
                            <div class="button">

                                <el-button type="primary" plain size="large" v-if="list.style_msg == 1"
                                    @click="refine">已完善</el-button>
                                <el-button type="danger" plain size="large" v-if="list.style_msg == 2"
                                    @click="refine">未完善</el-button>
                            </div>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="item">
                            <h4>
                                用户状态
                            </h4>
                            <div class="button" >
                                <el-button type="primary" plain size="large" v-if="list.status == 1" @click="change_status">正常</el-button>
                                <el-button type="danger" plain size="large" v-if="list.status == 2" @click="change_status">封停</el-button>
                            </div>
                        </div>
                    </el-col>

                </el-row>


            </div>
            <div class="bottom_content">
                <h4>
                     统计信息
                </h4>
                <div class="bottom_table">
                    <el-table :data="tableData.data" style="width: 100%" size="large" border :fit="true" row-class-name="row_name"  :header-cell-style="{
            textAlign: 'center',
            height: '42px',
        }">
                        <el-table-column fixed prop="date" label="消费金额" align="center" />
                        <el-table-column prop="name" label="普通订单数量" align="center" />
                        <el-table-column prop="state" label="VIP订单数量" align="center" />
                    </el-table>
                </div>
            </div>
        </div>
        <el-dialog v-model="dialogVisible" width="30%"  :title="is_refine?'信息完善': '用户状态'">
            <div>
                <el-form ref="ruleFormRef" :model="ruleForm" status-icon label-width="100px" class="demo-ruleForm"
                    size="large">
                    <div v-if="is_refine">
                        <el-form-item label="微信号：">
                            <el-input v-model="ruleForm.number" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="手机号：">
                            <el-input v-model="ruleForm.mobile" autocomplete="off" />
                        </el-form-item>
                    </div>
                    <div v-else>
                        <el-form-item label="选择状态：">
                            <el-switch v-model="ruleForm.status" size="large" :inactive-value="2" :active-value="1" />
                        </el-form-item>
                        <el-form-item label="备注：">
                            <el-input v-model="ruleForm.remark"  type="textarea" resize="none" placeholder="输入备注"/>
                        </el-form-item>
                    </div>
                    <div class="submit_button">
                        <el-button type="info" @click="close">取消</el-button>
                        <el-button type="primary" @click="submitForm" class="button">保存</el-button>
                    </div>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
  
<script setup lang="ts">
import { useRoute } from "vue-router"
import { onMounted, ref, reactive } from 'vue'
import Nav from "@/components/public/nav.vue"
import { get_user_list ,refine_user_data} from "@/request/api/user.ts"
import { reload } from "@/utils/flushed"
const route = useRoute()
console.log(route.params.id, "route");
let dialogVisible = ref(false)
const id = route.params.id
let list: any = ref({})
const tableData = reactive({
    data: [
        {
            date: '',
            name: '',
            state: '',
        },
    ]
})

const ruleForm = reactive({
    nickname: "",
    mobile: "",
    status: 1,
    remark : "",
    number : ""
})
// 是否是完善信息
let is_refine = ref(true)
const getUser = async () => {
    let { data } = await get_user_list({ id })
    console.log(data, "data用户星系");
    list.value = data.list[0]
    tableData.data[0].date = list.value.public_pay_money
    tableData.data[0].name = list.value.public_num
    tableData.data[0].state = list.value.public_pay_num
    ruleForm.nickname = list.value.nickname
    ruleForm.mobile = list.value.mobile
    ruleForm.status = list.value.status
    ruleForm.nickname = list.value.nickname
    ruleForm.number = list.value.number
}
// 完善信息
const refine = () => {
    is_refine.value = true
    dialogVisible.value = true
}
// 修改状态
const change_status = ()=>{
    is_refine.value = false 
    dialogVisible.value = true
}
const close = ()=>{
    dialogVisible.value = false
}
const submitForm = async()=>{
    if(is_refine.value){
        let data:any = await refine_user_data({mobile:ruleForm.mobile,number:ruleForm.number,id})
        console.log(data,"dada");
        if(data.code == 200){
            ElMessage({
                message: '完善成功',
                type: 'success',
            })
            reload()
        }else{
            ElMessage.error(data.message)
        }
    }else{
        let data:any = await refine_user_data({id,forbid_msg:ruleForm.remark,status:ruleForm.status})
        console.log(data,"dada");
        if(data.code == 200){
            ElMessage({
                message: '修改成功',
                type: 'success',
            })
            reload()
        }else{
            ElMessage.error(data.message)
        }
    }
}
onMounted(async () => {
    getUser()

})
</script>
  
<style lang="scss" scoped>
.main {
    display: flex;

    .right_route {
        padding: 10px 20px 0 20px;
        // flex: 1;
        box-sizing: border-box;
        background: rgba(#FFF, 1);
        width: calc(100vw - 200px);

        h3 {
            @include font(rgba(0, 0, 0, 0.4470588235294118), 14, 54);
            padding-left: 32px;

            span {
                color: rgba(0, 0, 0, 0.6470588235294118);
            }
        }

        .content {
            // width: 1200px;
            height: 164px;
            background-color: rgb(249, 250, 252);
            border: 1px solid rgb(228, 228, 228);
            display: flex;
            align-items: center;

            img {
                width: 93px;
                height: 93px;
                border-radius: 50%;
                // margin: 0 50px;
            }

            .user_img_list {
                text-align: center;
            }

            .item {
                // margin: 0 35px;
                text-align: center;

                h4 {
                    @include font(#333333, 20, 28);
                    margin-bottom: 15px;
                }

                p {
                    @include font(#333333, 15, 28);
                    height: 40px;
                }

                :deep(.el-button) {
                    padding: 10px 25px;
                    box-sizing: border-box;
                }
            }
        }

        .bottom_content {
            h4 {
                margin: 10px 0;
                @include font(#333, 16, 40);
                margin-left: 10px;
            }

            // .bottom_table {
            //     width: 1200px;
            // }
        }
    }
}

:deep(.el-row) {
    flex: 1;
}
:deep(.el-textarea__inner) {
  height: 100px;
}

:deep(.el-dialog__body) {
  padding-left: 50px;
  padding-right: 50px;
}
:deep(.el-dialog__header) {
  background: rgba(245, 245, 245, 1);
  margin-right: 0;
  padding: 10px 20px;
}

:deep(.el-dialog__headerbtn) {
  display: none;
}

.submit_button {
  padding-top: 20px;
  border-top: 1px solid rgb(242, 242, 242);
  text-align: right;
}
:deep(.row_name){
   height: 42px !important;
}
:deep(.el-table__cell){
    padding: 0;
}
</style>